<template>
	<view>
		<view class="i-tabs">
			<view class="i-tabs1" @click="indexclick(1)" >
				<view class="i-tabs1x" :class="indexs==1?'aitcvcs':''">
					待乘车
				</view>
				<view class="i-tabs1xs" :class="indexs==1?'aitcvcbgs':''">

				</view>
			</view>
			<view class="i-tabs1" @click="indexclick(2)" >
				<view class="i-tabs1x" :class="indexs==2?'aitcvcs':''">
					全部
				</view>
				<view class="i-tabs1xs" :class="indexs==2?'aitcvcbgs':''">

				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="contsss" :show-scrollbar="true" style="
		 height:calc(100vh - 90upx)  ">
		   <view class="" style="height: 25upx;" v-if="array.length>0">
		   	
		   </view>
			<view class="MyOrder_1" v-for="(item,index) in array" :key="index" @click="readArticle(item)">
				<view class="MyOrder_1t">
					<view class="MyOrder_1t_1">
						{{item.startPoint}} <text class="iconfont icondanxiangzhuanhuan"
							style="color: #999;margin: 0 10upx;"></text>
						{{item.endPoint}}
					</view>
					<view class="MyOrder_1t_2">
						{{item.status==1?'待乘车':item.status==2?'已验票':item.status==3?'退款中':item.status==4?'已退款':item.status==9?'已过期':''}}
					</view>
				</view>
				<view class="MyOrder_1x">
					{{item.vehicle||''}}
				</view>
				<view class="MyOrder_1y">
					<view class="MyOrder_1y_2">
						<view class="MyOrder_1y_2x">
							<text class="MyOrder_1y_2x-1x"></text>{{item.address}}
						</view>
						<view class="MyOrder_1y_2x">
							<text class="MyOrder_1y_2y-1y"></text>{{item.priceAddress}}
						</view>
					</view>
					<view class="MyOrder_1y_1">
						<text class="MyOrder_1y_1x">共{{item.seatSum}}张</text>
						<text class="MyOrder_1y_1y">¥{{item.priceSum}}</text>
					</view>
				</view>
				<view class="MyOrder_1z">
					<view class="MyOrder_1z_1">
						{{item.departDate?item.departDate:''}} {{item.departTime?item.departTime:''}} 发车
					</view>
					<view class="MyOrder_1z_2y" @click.stop="fiedCick(item)" v-if="item.status==1">
						<view class="MyOrder_1z_3">
							取消活动
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="array.length>5"
				style="padding-bottom: 18upx; font-size: 26upx;text-align: center;color: #666;">
				已经到底啦～
			</view>
			<view class="NoData" v-if="array.length==0">
				<view class="NoDataA">
					<image class="NoData_images" src="@/static/imge/zanwu.svg"></image>
				</view>
				<view class="NoData_texte1">
					亲，当前暂无活动订单
				</view>
				<view class="NoData_texte2">可以先看看别的哦～</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				indexs: 1,
				page: 1,
				pageSize: 20,
				current: 'tab2',
				current_scroll: 'tab2',
				showsexa: true,
				showsexb: false,
				array: [],
				arraysd: [],
				recordCount: 0,
				stuas: '1'
			}
		},
		onShow() {
			this.findList()
		},
		methods: {
			...mapMutations(['getData', "formData"]),
			findList() {
				var that = this
				that.array = []
				var objP = {
					pageNum: '1',
					pageSize: '100',
					status: this.stuas,
					userId:  uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
				}
				const obj = {
					url: 'ddOrderInfo/findList',
					data: objP,
					success(res) {
						that.array = res.datas.list
					},
					fail(res) {

					},
					complete(res) {}
				}
				that.getData(obj)

			},
			indexclick(e) {
				this.indexs = e
				if (e == 1) {
					this.stuas = '1'
				} else {
					this.stuas = '1,2,3,4,9'
				}
				this.findList()
			},
			fiedCick(e) {
				uni.navigateTo({
					url: '/pagesA/dingdantp/dingdantp?id=' + e.id
				})
			},
			readArticle(e) {
				uni.navigateTo({
					url: '/pagesB/OrderDetails/OrderDetails?id=' +encodeURIComponent(JSON.stringify(e)) 
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contsss {
		background: #f5f5f5;
	}


	.i-tabs {
		display: flex;
		align-items: center;
		height: 90upx;
		justify-content: center;
	}

	.i-tabs1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.i-tabs1x {
		font-size: 28upx;
		padding: 0 50upx;
		color: #333;
	}

	.i-tabs1xs {
		height: 10upx;
		border-radius: 6upx;
		width: 40upx;
		margin-top: 8upx;
		background-color: #fff;
	}

	.aitcvcs {
		font-size: 30upx;
		font-weight: 600;
	}

	.aitcvcbgs {
		background: linear-gradient(to right, #4374eb, #c4d2f7);
	}

	.MyOrder_1 {
		background-color: #fff;
		margin: 25upx;
		margin-top: 0;
		border-radius: 16upx;
		padding: 0upx 25upx;
	
	
	
		.MyOrder_1t {
			display: flex;
			align-items: center;
			height: 90upx;
			border-bottom: 2upx solid #f7f7f7;
			font-size: 30upx;
			font-weight: 500;
	
			.MyOrder_1t_2 {
				margin-left: auto;
				font-size: 32upx;
			}
	
		}
	
		.MyOrder_1z {
			text-align: center;
			display: flex;
			align-items: center;
			height: 90upx;
			border-top: 2upx solid #f7f7f7;
	
			.qrcodes_1y {
				height: 100%;
				margin-left: auto;
				display: flex;
				align-items: center;
				color: #4374eb;
				font-size: 28upx;
				font-weight: 500;
	
				
			}
	
			.MyOrder_1z_1 {
				color: #666;
				font-size: 28upx;
			}
	
			.MyOrder_1z_2y {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 90upx;
				margin-left: 30upx;
	
				.MyOrder_1z_2 {
					height: 60upx;
					border-radius: 30upx;
					width: 150upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					background-color: #4374eb;
					font-size: 26upx;
				}
			}
	
			.MyOrder_1z_2y {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 90upx;
				margin-left: 30upx;
	
				.MyOrder_1z_3 {
					height: 60upx;
					border-radius: 30upx;
					width: 150upx;
					text-align: center;
					line-height: 60upx;
					color: #4374eb;
					border: 2upx solid #4374eb;
					box-sizing: border-box;
					background-color: #e9f4fd;
					font-size: 26upx;
					font-weight: 500;
				}
			}
	
		}
		.MyOrder_1x {
			font-size: 30upx;
			font-weight: 500;
			padding-top: 20upx;
		}
		.MyOrder_1y {
			display: flex;
			align-items: center;
			margin-top: 5upx;
			margin-bottom: 15upx;
	
			.MyOrder_1y_1 {
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
	
				.MyOrder_1y_1x {
					font-size: 26upx;
					color: #777;
				}
	
				.MyOrder_1y_1y {
					font-size: 32upx;
					color: #333;
					margin-left: 10upx;
				}
			}
	
			.MyOrder_1y_2 {
				.MyOrder_1y_2x {
					font-size: 28upx;
					display: flex;
					align-items: center;
					margin-top: 10upx;
	
					.MyOrder_1y_2x-1x {
						width: 16upx;
						height: 16upx;
						background: #61d34e;
						border-radius: 50%;
						border: 6upx solid #dff6dc;
						margin-right: 10upx;
					}
	
					.iconfont {
						font-size: 36upx !important;
						margin-right: 16upx;
						color: #999;
					}
	
					.MyOrder_1y_2y-1y {
						width: 16upx;
						height: 16upx;
						background: #f3b158;
						border-radius: 50%;
						border: 6upx solid #fcefdd;
						margin-right: 10upx;
					}
				}
			}
		}
	}
</style>